<!--
 * @Description: 
 * @Author: hrc
 * @Date: 2024-12-16 15:16:23
 * @LastEditors: HuRrongChao
 * @LastEditTime: 2025-03-01 18:02:18
-->
<template>
  <MyDialog v-model:visible="visible" :width="80" :height="80">
    <div class="upload-layout flex-box">
      <ul class="upload-layout__left flex-col">
        <li v-for="item in meanList" :key="item.name" :class="[
          'menu-item',
          {'is-active': item.choosed},
          {'is-disabled': item.name === '文字' && !selectedImage}
        ]" @click="handleMenuClick(item)">
          {{ item.name }}
        </li>
      </ul>
      <div class="upload-layout__right flex-col">
        <component
          ref="curWork"
          @save="handleSave"
          @uploadVideo="handleUploadVideo"
          :is="curChoosed === '选取' ? ChooseImage : TextEditImage"
          :selectedImage="selectedImage"
          :btnText="btnText"
          :progressPercent="progressPercent"></component>
      </div>
    </div>
  </MyDialog>
</template>

<script setup>
import MyDialog from '../dialog.vue'
import ChooseImage from './components/chooseImage.vue'
import TextEditImage from './components/textEditImage.vue'
import { useUploadFile } from './hooks/useUploadFile'
import { ref, computed } from 'vue'
import api from '@/api/axios.js'

const visible = ref(false)
const curChoosed = ref('选取')
const selectedImage = ref('')
const videoInfo = ref({})

const meanList = computed(() => {
  const map = [
    {
      name: '选取',
      function: () => {},
      choosed: curChoosed.value === '选取',
      visible: true
    },
    {
      name: '文字',
      function: () => {},
      choosed: curChoosed.value === '文字',
      visible: true
    }
  ]
  return map.filter(it => it.visible)
})

const showUploadModal = () => {
  visible.value = true
}

const currentFile = ref()
const handleSave = async ({ url, video_duration }, file) => {
  videoInfo.value = {
    url,
    video_duration
  }
  selectedImage.value = url
  currentFile.value = file
  console.log('currentFile.value', currentFile.value)
  await handleSplitAndCheck()
  curChoosed.value = '文字'
}

const handleMenuClick = (item) => {
  if (item.name === '文字' && !selectedImage.value) {
    return
  }
  curChoosed.value = item.name
}


// 文件上传部分
const { hooks, needs, buttonStatus, btnText, progressPercent, splitedFile, splitFile, setProgress, setStatus, handleBtnChange, uploadCover } = useUploadFile()

const handleSplitAndCheck = async () => { //分片并检查之前是否上传
  try {
    const data = await splitFile(currentFile.value)
    splitedFile.value = data
    const fileInfo = {
      fileId: data.fileID,
      ext: data.ext,
      chunkIds: data.chunkInfos.map((it) => it.id)
    }
    const res = await api.fileHandshake(fileInfo)
    if (res.data.code === 403) {
      // this.$message.open({
      //   tittle: res.data.msg,
      //   type: 'warning',
      //   duration: 1000,
      //   center: true
      // })
      return
    }
    if (Array.isArray(res.data.data)) {
      needs.value = res.data.data
      setProgress()
      buttonStatus.value = 'choose'
      setStatus()
      // this.$message.open({
      //   tittle: '视频文件预处理完成！',
      //   type: 'success',
      //   duration: 1000,
      //   center: true
      // })
    } else {
      needs.value = []
      setProgress()
      buttonStatus.value = 'finish'
      setStatus()
      // this.$message.open({
      //   tittle: '视频文件已经上传！',
      //   type: 'success',
      //   duration: 1000,
      //   center: true
      // })
    }
    console.log('分片结果：', data)
  } catch (err) {
    console.log(err)
  }
}

const handleUploadVideo = async ({ coverImg, videoTitle, videoType }) => {
  hooks.value.handleFinish = async () => {
    // 上传封面
    await uploadCover(coverImg, { 
      video_title: videoTitle,
      video_type: videoType,
      video_duration: videoInfo.value.video_duration,
      video_size: currentFile.value.size,
      status: 1
    })
  }
  handleBtnChange()
}

defineExpose({
  showUploadModal
})
</script>

<style lang="scss" scoped>
.upload-layout {
  height: 100%;
  padding: 20px;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;

  &__left {
    flex-shrink: 0;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    min-width: 120px;

    .menu-item {
      padding: 12px 20px;
      user-select: none;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s ease;
      text-align: center;
      
      &:hover {
        background: rgba(0,0,0,0.04);
      }
      
      &.is-active {
        background: #1890ff;
        color: white;
      }

      & + .menu-item {
        margin-top: 10px;
      }

      &.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        
        &:hover {
          background: none;
        }
      }
    }
  }

  &__right {
    position: relative;
    flex: 1;
    height: 100%;
    padding: 24px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  }
}

</style>

<style lang="scss">
.btn {
  padding: 10px 24px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    // 将 darken(#1890ff, 10%) 替换为具体的深色值
    background: #096dd9; // 这是 #1890ff 的深色版本
    color: white;
  }
}
</style>
